<script setup>
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import AnnounceEdit from '@/components/AnnounceEdit.vue'

//表格假数据
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    main: [
      {
        text: 'Jerryaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
      }
    ]
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    text: 'Jerry',
    main: [
      {
        text: 'Jerryaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
      }
    ]
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    text: 'Jerry',
    main: [
      {
        text: 'Jerryaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
      }
    ]
  }
])
//编辑
const dialog = ref()
const onAddAnnounce = () => {
  dialog.value.open({})
}
</script>

<template>
  <el-container>
    <el-header
      ><el-button type="primary" @click="onAddAnnounce">点我创建新的公告</el-button></el-header
    >
    <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div class="textPlace">
              <el-table :data="props.row.main" class="tb">
                <el-table-column label="公告内容" prop="text" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" prop="date" />
        <el-table-column label="公告名" prop="name" />
        <el-table-column prop="action" label="操作">
          <template #default="{ row }"
            ><!--#default它用于接收具名插槽的默认内容，这里使用解构,可以在插槽内部访问这些变量并进行相关操作。。-->
            <el-button
              :icon="Delete"
              circle
              plain
              type="danger"
              @click="refuseApplication(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
  <AnnounceEdit ref="dialog" @success="onSuccess"></AnnounceEdit>
  <!--监听success，触发回调编辑成果刷新该页面-->
</template>

<style lang="scss" scoped>
.textPlace {
  border: 0;
  text-align: center;
  .content {
    white-space: nowrap;
    overflow: visible;
    word-wrap: break-word;
  }
}

.tb .el-table__footer-wrapper::before {
  display: none;
}
</style>
